import React, { useContext} from 'react'
import { View, Text, Image, Button } from '@tarojs/components'
import Taro from '@tarojs/taro'
import './welcome.less'
import banner from '../../images/banner@2x.png'
import gold from '../../images/ic_home_gold@2x.png'
import gift from '../../images/gift@2x.png'
import { UserContext } from "../../app";

export default () => {
  // const [user, setUser] = useState({
  //   vip: false,
  //   sign: false,
  //   signDays: 0,
  //   todayInfo: {}
  // })
  //
  // const [openId, setOpenId] = useState('')
  const {user,reloadUser}: any = useContext(UserContext)
  console.log(user)

  // useEffect(() => {
  //   async function fetchData() {
  //     const openid = await getOpenid()
  //     // const openid = u.user.openid
  //
  //     const { data } = await Taro.request({
  //       url: `${process.env.PREFIX}/user/${openid}`,
  //     })
  //     setUser(data.data)
  //     setOpenId(openid)
  //   }
  //
  //   fetchData()
  // }, [])


  const clickSignButton = async () => {
    // const { todayInfo, sign } = user;
    if (!sign) {
      await Taro.request({
        url: `${process.env.PREFIX}/user/${user.openid}/sign`,
        method: "POST"
      })
      // console.log(resp.data.data)
      // const { signDays, pointsEarned, pointsLeft } = resp.data.data
      // setUser({ ...user, sign: true, signDays, todayInfo: { ...todayInfo, pointsEarned, pointsLeft } })
      reloadUser()
    }

  }


  const { vip, todayInfo, sign, signDays }: any = user;
  const pointsEarned = todayInfo?.pointsEarned || 0
  const pointsLeft = todayInfo?.pointsLeft || 0
  return (
    <View className='base'>
      <View className='box'>
        <View className='top'>
          {vip && <View className='top-vip'>您是VIP年卡用户，享2倍微信运动上限</View>}
          <View style={{ alignSelf: 'flex-start' }}>今日累计</View>
          <View><Text className='gold'>{pointsEarned}</Text>金币</View>
          <View className='today-left'>
            <Text>{pointsLeft}金币待领取</Text>
          </View>
        </View>

        <View style={{ margin: '20px -20px' }}>
          <Image src={banner} mode='widthFix' className='banner' />
        </View>

        <View className='sign'>
          <View className='flex-row center'>
            <View>
              <View style={{ fontSize: '120%' }}>已连续签到{signDays}天</View>
              <View style={{
                fontSize: '100%',
                color: '#999999'
              }}
              >再签6天即可领取满签奖</View>
            </View>
            <View>
              <Button className={sign ? 'signed-button' : 'not-signed-button'} type='primary' size='mini'
                onClick={clickSignButton}
              >{sign ? '已签到' : '立即签到'}</Button>
            </View>
          </View>
          <View className='flex-row center'>
            {[...Array(7)].map((_, i) => {
              let a
              if (i < signDays) {
                a = <View className='sign-everyday have-signed'>
                  <Text className='sing-icon'>✓</Text>
                  <Text className='sign-text'>200</Text>
                </View>
              } else if (i < 6) {
                a = <View className='sign-everyday not-signed'>
                  <Image className='sign-icon' src={gold} mode='aspectFit' />
                  <Text className='sign-text'>200</Text>
                </View>
              } else {
                a = <View className='sign-everyday full-signed'>
                  <Image className='sign-icon' src={gift} mode='aspectFit' />
                  <Text className='sign-text' style={{ color: '#ff3444' }}>满签奖</Text>
                </View>
              }

              return <View className='flex-column center' key={i}>{a}
                <Text className='sign-label'>{i + 1}天</Text>
              </View>
            })}
          </View>
        </View>
      </View>

      <View className='box flex-row'>
        <View className='flex-column'>
          <Text className='gold-title'>遛娃领金币</Text>
          <Text>可多次结算，今日已结算{0}步</Text>
          <View>
            <Button id='exchange-gold-btn' size='mini'>换金币</Button>
          </View>
        </View>
        <View>
          [今日步数]
        </View>
      </View>

      <View className='box'>
        <View>每日任务</View>
        <View className='flex-row'>
          <View></View>
          <View className='flex-column'>
            <View>分享商品</View>
            <View>+50金币</View>
          </View>
          <View>
            <Button>去分享</Button>
          </View>
        </View>

        <View>进阶任务</View>
        <View className='flex-row'>
          <View></View>
          <View className='flex-column'>
            <View>点亮商户</View>
            <View>+50金币</View>
          </View>
          <View>
            <Button onClick={()=>{Taro.navigateTo({url: '/pages/lightup/lightup'})}}>去点亮</Button>
          </View>
        </View>
        <View className='flex-row'>
          <View></View>
          <View className='flex-column'>
            <View>上传小票</View>
            <View>高额金币</View>
          </View>
          <View>
            <Button>去分享</Button>
          </View>
        </View>
        <View className='flex-row'>
          <View></View>
          <View className='flex-column'>
            <View>邀请好友</View>
            <View>+50金币</View>
          </View>
          <View>
            <Button>去邀请</Button>
          </View>
        </View>

        <View>其他任务</View>
        <View className='flex-row'>
          <View></View>
          <View className='flex-column'>
            <View>完善宝宝生日</View>
            <View>+50金币</View>
          </View>
          <View>
            <Button>去完善</Button>
          </View>
        </View>
        <View className='flex-row'>
          <View></View>
          <View className='flex-column'>
            <View>绑定手机号</View>
            <View>+50金币</View>
          </View>
          <View>
            <Button>去绑定</Button>
          </View>
        </View>
      </View>

    </View>
  )
}

